<template>
  <div>
    <!---->
    <el-form :model="params" style="margin: 20px">
      站点类型：
      <el-select v-model="params.siteId" placeholder="请选择站点">
        <el-option
          v-for="item in siteList" :key="item.siteId" :label="item.siteName" :value="item.siteId">
        </el-option>
      </el-select>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      页面别名：
      <el-input v-model="params.pageAliase" style="width: 100px"></el-input>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-button type="primary" @click="query">查询</el-button>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <router-link :to="{
        path:'/cms/page/add',
        query:{
          page: this.params.page,
          siteId: this.params.siteId
      }}">
        <el-button type="success">添加页面</el-button>
      </router-link>
    </el-form>

    <!--表格-->
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column type="index" width="80px" align="center"></el-table-column>
      <el-table-column prop="pageName" label="页面名称" align="center"></el-table-column>
      <el-table-column prop="pageAliase" width="150px" label="别名" align="center"></el-table-column>
      <el-table-column prop="pageType" label="页面类型" width="100px" align="center"></el-table-column>
      <el-table-column prop="pageWebPath" label="访问路径" align="center"></el-table-column>
      <el-table-column prop="pagePhysicalPath" label="物理路径" align="center"></el-table-column>
      <el-table-column label="操作" align="center" width="300px">
        <template slot-scope="page">
          <el-button size="small" type="success" @click="preview(page.row.pageId)">预览</el-button>
          <el-button size="small" type="primary" @click="edit(page.row.pageId)">编辑</el-button>
          <el-button size="small" type="warning" @click="post(page.row.pageId)">发布</el-button>
          <el-button size="small" type="danger" @click="del(page.row.pageId)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!--分页-->
    <el-pagination
      hide-on-single-page
      style="margin: 20px auto;"
      background
      layout="prev, pager, next"
      :total="total"
      :current-page="params.page"
      @current-change="changePage"
      :page-size="params.size">
    </el-pagination>
  </div>
</template>

<script>
  import * as cmsApi from '../api/cms';

  export default {
    name: "page_list",
    data() {
      return {
        tableData: [],
        params: {
          page: 1,
          size: 8,
          siteId: '',
          pageAliase: '',
          siteName: ''
        },
        total: 0,
        siteList: []
      }
    },
    methods: {
      edit: function (pageId) {
        this.$router.push({
          path: '/cms/page/edit/' + pageId
        })
      },
      query: function () {
        // 调用服务端接口
        cmsApi.page_list(this.params.page, this.params.size, this.params).then((result) => {
          // 将result结果数据赋值给tableData模型对象
          this.tableData = result.queryResult.list;
          this.total = result.queryResult.total;
        });
      },
      changePage: function (page) {
        this.params.page = page;
        this.query();
      },
      del: function (pageId) {
        this.$confirm('确认删除吗？', '提示', {}).then(() => {
          cmsApi.page_del(pageId).then(result => {
            if (result.success) {
              this.$message.success("删除成功");
              this.query();
            } else if (result.message) {
              this.$message.error(result.message);
            } else {
              this.$message.error("删除失败");
            }
          });
        });
      },
      preview: function (pageId) {
        window.open("http://www.xuecheng.com:520/cms/preview/" + pageId);
      },
      post: function (pageId) {
        this.$confirm('确认发布该页面吗?', '提示', {
        }).then(() => {
          cmsApi.page_post(pageId).then((res) => {
            if(res.success){
              console.log(res);
              this.$message.success('发布成功，请稍后查看结果');
            }else{
              this.$message.error('发布失败');
            }
          });
        }).catch(() => {
        });
      }
    },
    mounted() {
      this.query();
      this.siteList = [
        {
          siteId: "5a751fab6abb5044e0d19ea1",
          siteName: "门户主站"
        }, {
          siteId: "110",
          siteName: "警察站"
        }
      ]
    },
    created() {
      // 取出路由中的参数，赋值给数据对象
      this.params.page = Number.parseInt(this.$route.query.page || 1);
      this.params.siteId = this.$route.query.siteId;
    }
  }
</script>

<style scoped>
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
</style>
